<template>
    <!-- <div class="form-container" style="margin:0 0 12px 0" >
       <el-card>
      <el-row :gutter="12" class="search-row">
       <el-form :inline="true" :model="formInline" ref="formRef"  label-position="right" class="demo-form-inline flex flex-wrap gap-4">
         <el-form-item label="地市:" prop="city" class="form-item">
       <el-select v-model="city" placeholder="请选择地市" class="filter-item">
           <el-option  v-for="item in citylist" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
     </el-form-item>
     <el-form-item label="供电所:" prop="powerSupplyStation" class="form-item">
       <el-select v-model="powerSupplyStation" placeholder="请选择供电所" class="filter-item">
           <el-option  v-for="item in citylist" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
     </el-form-item>
         <el-form-item label="诉求时间:" prop="appealTime" class="form-item">
         <el-date-picker
         v-model="appealTime"
         type="datetimerange"
         format="YYYY-MM-DD "
         date-format="YYYY/MM/DD "
         class="filter-item"
       />
     </el-form-item>
         <el-form-item  class="form-item"  >
         <el-button type="primary" @click="getData">查 询</el-button>
         <el-button    @click="reset">重置</el-button>
         </el-form-item>
         </el-form>
 </el-row>  
 </el-card>
 </div> -->
   <el-card>
     <div class="table_heard" style="display: flex;justify-content: space-between;"> 
       <div class="heard_left" style="display: inline-block;">
       <span>数据明细</span>
     </div> 
     <div class="heard_right" style="display: flex;justify-content: flex-end;">
         <el-button type="primary" @click="removeallClick">
         删除
         </el-button>
         <el-button type="primary" @click="onImportExcelClick">
           导入数据
         </el-button>
         </div>
     </div>
     <el-table :data="tableData"
               border
               v-loading="dataLoading"
               style="width: 100%;margin-bottom: 20px;margin-top: 20px;height: 70vh">
       
       <el-table-column prop="powerSupplyUnit" label="所属供电单位"  align="center" min-width="160px">
       </el-table-column>
       <el-table-column prop="districtBureau" label="所属区县局"  align="center" min-width="100px">
       </el-table-column>
       <el-table-column prop="municipalBureau"  label="所属地市局"  align="center" min-width="120px">
       </el-table-column>
       <el-table-column prop="workOrderNumber"  label="客服工作单编号"  align="center" min-width="160px">
       </el-table-column>
       <el-table-column prop="businessType" label="业务类别"  align="center" min-width="160px">
       </el-table-column>
       <el-table-column prop="notificationDate"  label="通报日期"  align="center" min-width="160px">
       </el-table-column>
       <el-table-column prop="isRepeatedComplaint"  label="是否重复投诉"  align="center" min-width="160px">
       </el-table-column>
      
       <el-table-column prop="dailyType" label="日报类型" min-width="100px"  align="center">
       </el-table-column>
      
     </el-table>
     <el-pagination
         class="pagination"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="page"
         :page-size="size"
         layout="total, prev, pager, next, jumper"
         :total="total"
     />
   </el-card>
   <el-dialog v-model="UploadExcelDialogShow" title="上传数据" width="20%">
     <el-upload
         class="upload-demo"
         multiple
         method="post"
         :headers="headers"
         :action="uploadAction"
         style="margin-left: 10px"
         accept=".xlsx,.xls"
         :show-file-list="false"
         :on-success="handleSuccess"
         :before-upload="beforeUploadHandle"
         name="files"
     >
       <el-button style="margin-left: 100px;" type="primary" :loading="importLoading">导入</el-button>
     </el-upload>
   </el-dialog>
   <el-dialog v-model="Deletenotice" title="提示" width=40%>
     是否要删除？
      <template #footer>
     <div class="dialog-footer" >
         <el-button @click="Deletenotice = false">取消</el-button>
         <el-button type="primary" @click="ConfirmremoveallClick">
           确认
         </el-button>
       </div>
     </template></el-dialog>
 </template>
 <script setup>

 
 import { ref,computed ,onMounted} from 'vue'
 import utils from "@/utils/utils";
 import store from '@/store'
 import {getDataovertime,getovertimedeleteAll} from "@/api/work-order";
 import { ElMessage } from 'element-plus'

 const city = ref('')
 const powerSupplyStation = ref('')
 const appealTime = ref('')
 const UploadExcelDialogShow = ref(false)
 const tableData = ref([])
 const dataLoading = ref(false)
 const total = ref(0)
 const page = ref(1)
 const size = ref(10)
 const importLoading = ref(false)

 const apiBaseUrl=import.meta.env.VITE_API_URL
 const uploadAction = computed(() => `${apiBaseUrl}/import/daily/report/timeout
`);
let headers = {}
 const Deletenotice=ref(false)
//  const citylist = ref([
//    { value: '业务办理', label: '业务办理' },
//  ])
 const getData = async () => {
  
   dataLoading.value = true
   const result = await getDataovertime({
     page: page.value,
     size: size.value
   })
   tableData.value = result.list
   total.value = result.total
   dataLoading.value = false
 }
 
 getData()
 const onImportExcelClick = () => {
 
   UploadExcelDialogShow.value = true
 }
 
 const beforeUploadHandle = (file) => {
   importLoading.value = true // 开启按钮 loading
   return true
 }
 
 const handleSuccess = async (res) => {
   console.log(res);
   utils.showSuccess('上传数据成功')
   await getData()
   UploadExcelDialogShow.value = false
   importLoading.value = false
   // utils.hideLoadding()
 }
 
 const removeallClick=()=>{
  
   Deletenotice.value=true
 }
 const ConfirmremoveallClick = async()=> {
   let result =await getovertimedeleteAll()
   console.log(result);
   if(result){
     ElMessage({
     message: '删除成功',
     type: 'success',
     plain: true,
     })
     getData()
   }
   Deletenotice.value=false
   // getovertimedeleteAll().then((res)=>{
   // console.log(res);
   // })
   
 }
 /**
  * size 改变触发
  */
 const handleSizeChange = async currentSize => {
   size.value = currentSize
   await getData()
 }
 
 /**
  * 页码改变触发
  */
 const handleCurrentChange = async currentPage => {
   page.value = currentPage
   await getData()
 }
 onMounted(() => {
  headers = { 'X-Token': store.getters.token }
})
 </script>
 
 <style lang="scss" scoped >
 .demo-form-inline {
   display: flex;
   flex-wrap: nowrap;
   .form-item{
     // min-width: 200px;
       flex-grow: 1;
     // flex-basis: 0;
   }
 }
 
 /* 响应式布局 */
 // @media (min-width: 640px) {
 //   .demo-form-inline .w-full {
 //     width: 50%;
 //   }
 // }
 
 @media (min-width: 768px) {
   .demo-form-inline .form-item {
     width: 33.333%;
   }
 }
 
 @media (min-width: 1024px) {
   .demo-form-inline .form-item {
     width: 25%;
   }
  
 }
 
 .filter-item{
   min-width: 120px;
 }
 
 .search-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: nowrap;
   overflow-x: auto;
   margin-bottom: -16px;
 }
 
 .right-buttons {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
 }
 </style>